<template>
    <div class="app-container">
        <!-- nav -->
        <el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">首页</el-menu-item>
            <el-menu-item index="2" @click="this.$router.push('/goods')">商品</el-menu-item>
            <el-menu-item index="3" @click="this.$router.push('/orderer')">订单</el-menu-item>
        </el-menu>

        <!-- 头像框 -->
        <div class="dropdown" style=" position: absolute;left:850px;top:45px">
            <label tabindex="0" class="btn btn-ghost btn-circle avatar">
                <div class="w-10 rounded-full">
                    <img src="../assets/images/head.jpg" />
                </div>
            </label>
            <ul tabindex="0" class="mt-2 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-55">
                <li><a class="no-wrap" @click="this.openModal">更换头像</a></li>
                <li><a @click="this.logout = true">登出</a></li>
            </ul>
        </div>

        <!-- 模态框 -->
        <div class="fixed inset-0 flex items-center justify-center" v-if="showModal" style="z-index: 1000;">
            <div class="modal modal-open">
                <div class="modal-box">
                    <h2 class="text-xl">更换头像</h2>
                    <!-- 在这里放置您的头像上传或选择功能 -->
                    <input type="file" @change="onFileChange" style="margin-top: 50px;">
                    <img v-if="previewImage" :src="previewImage" alt="图片预览"
                        style="width: 50px; height: 50px;margin-top:50px; object-fit: cover;" />
                    <div class="modal-action">
                        <button class="btn" @click="showModal = false">取消</button>
                        <button class="btn btn-primary" @click="this.changeHead">确定</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 这里是登出警告框 -->
        <div style="margin-top: 20px;" v-show="logout">
            <div class="alert shadow-lg">
                <div>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        class="stroke-info flex-shrink-0 w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <span>确定退出登录？</span>
                </div>
                <div class="flex-none">
                    <button class="btn btn-sm btn-ghost" @click="this.logout = false">取消</button>
                    <button class="btn btn-sm btn-primary" @click="this.Logout">确定</button>
                </div>
            </div>
        </div>

        <el-dialog :title="title" :visible.sync="visible" :close-on-click-modal="false" :show-close="false"
            :custom-class="customClass" :width="width" :centered="centered" :before-close="beforeClose">
            <div v-html="content"></div>
            <span slot="footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="confirm">确认</el-button>
            </span>
        </el-dialog>

        <div class="total-layout">
            <el-row :gutter="30">
                <el-col :span="8">
                    <div class="total-frame">
                        <div class="total-title">今日订单总数</div>
                        <div class="total-value">{{ data.todayOrderNumber }}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="total-frame">
                        <div class="total-title">今日销售总额</div>
                        <div class="total-value">￥{{ data.dailySalesTotal }}</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="total-frame">
                        <div class="total-title">昨日销售总额</div>
                        <div class="total-value">￥{{ data.previousSalesTotal }}</div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="un-handle-layout">
            <div class="layout-title">待处理事务</div>
            <div class="un-handle-content">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <div class="un-handle-item">
                            <span class="font-medium">已完成订单</span>
                            <span style="float: right" class="color-danger">({{ data.completedOrder }})</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="un-handle-item">
                            <span class="font-medium">待确认收货订单</span>
                            <span style="float: right" class="color-danger">({{ data.pendingDeliveryConfirmationOrder
                            }})</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="un-handle-item">
                            <span class="font-medium">已取消的订单</span>
                            <span style="float: right" class="color-danger">({{ data.cancelledOrder }})</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <div class="un-handle-item">
                            <span class="font-medium">待发货订单</span>
                            <span style="float: right" class="color-danger">({{ data.pending_shipment_order }})</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="un-handle-item">
                            <span class="font-medium">新缺货登记</span>
                            <span style="float: right" class="color-danger">({{ data.outOfStockRegistration }})</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="un-handle-item">
                            <span class="font-medium">已发货订单</span>
                            <span style="float: right" class="color-danger">({{ data.shippedOrder }})</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="overview-layout">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="out-border">
                        <div class="layout-title">商品总览</div>
                        <div style="padding: 40px">
                            <el-row>
                                <el-col :span="8" class="color-danger overview-item-value">{{ data.listedProduct }}</el-col>
                                <el-col :span="8" class="color-danger overview-item-value">{{ data.tightWarehouseInventory
                                }}</el-col>
                                <el-col :span="8" class="color-danger overview-item-value">{{ data.allProducts }}</el-col>
                            </el-row>
                            <el-row class="font-medium">
                                <el-col :span="8" class="overview-item-title">已上架</el-col>
                                <el-col :span="8" class="overview-item-title">库存紧张</el-col>
                                <el-col :span="8" class="overview-item-title">全部商品</el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="out-border">
                        <div class="layout-title">用户总览</div>
                        <div style="padding: 40px">
                            <el-row>
                                <el-col :span="6" class="color-danger overview-item-value">{{ data.dailyBrowse }}</el-col>
                                <el-col :span="6" class="color-danger overview-item-value">{{ data.previousBrowse
                                }}</el-col>
                                <el-col :span="6" class="color-danger overview-item-value">{{ data.monthBrowse }}</el-col>
                                <el-col :span="6" class="color-danger overview-item-value">{{ data.allBrowse }}</el-col>
                            </el-row>
                            <el-row class="font-medium">
                                <el-col :span="6" class="overview-item-title">今日浏览</el-col>
                                <el-col :span="6" class="overview-item-title">昨日浏览</el-col>
                                <el-col :span="6" class="overview-item-title">本月浏览</el-col>
                                <el-col :span="6" class="overview-item-title">总浏览</el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
  
<script>
import Auth from "../auth/auth"
import { GetSupplierIndex, SupplierChangeHead } from "../../wailsjs/go/pkg/User"
export default {
    name: 'index',
    data() {
        return {
            logout: false,
            showModal: false,
            previewImage: '',
            data: {}
        }
    },
    created() {
    },
    methods: {
        //退出登陆
        Logout() {
            //删除已经登陆的token和email
            Auth.delFrontAuth()
            //切换路由到login
            this.$router.push("/login")
        },
        //打开模态框
        openModal() {
            this.showModal = true;
        },
        //当用户上传之后图片的base64上传
        onFileChange(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    this.previewImage = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        },
        //添加获取首页数据
        GetIndexData() {
            //从本地缓存获取supplier email
            GetSupplierIndex(localStorage.getItem("supplier_email"), localStorage.getItem("supplier_token")).then((rep) => {
                console.log(rep);
                this.data = rep.data
                if (rep.code == 401) {
                    this.$router.push("/login")
                }
            }).catch((rep) => {
                console.log(rep);
            })
        },
        changeHead() {
            if (this.previewImage.length != 0) {
                SupplierChangeHead(localStorage.getItem("supplier_email"), this.previewImage, localStorage.getItem("supplier_token")).then((rep) => {
                    if (rep.code == 401) {
                        this.$router.push("/login")
                    }
                    this.showModal = false
                }).catch((rep) => {
                    console.log(rep);
                })
            }
        }
    },
    mounted() {
        this.GetIndexData()
    }
}
</script>
  
<style scoped>
@import "../daisyui.css";


* {
    -webkit-user-select: none;
    /*webkit浏览器*/
    -khtml-user-select: none;
    /*早期浏览器*/
    -moz-user-select: none;
    /*火狐*/
    -ms-user-select: none;
    /*IE10*/
    user-select: none;
}

.app-container {
    margin-top: 40px;
    margin-left: 120px;
    margin-right: 120px;
}

.total-layout {
    margin-top: 40px;
}

.total-frame {
    border: 1px solid #DCDFE6;
    padding: 20px;
    height: 100px;
}

.total-icon {
    color: #409EFF;
    width: 60px;
    height: 60px;
}

.total-title {
    text-align: center;
}

.total-value {
    text-align: center;
}

.un-handle-layout {
    margin-top: 20px;
    border: 1px solid #DCDFE6;
}

.layout-title {
    color: #606266;
    padding: 15px 20px;
    background: #F2F6FC;
    font-weight: bold;
}

.un-handle-content {
    padding: 20px 40px;
}

.un-handle-item {
    border-bottom: 1px solid #EBEEF5;
    padding: 10px;
}

.overview-layout {
    margin-top: 20px;
}

.overview-item-value {
    font-size: 24px;
    text-align: center;
}

.overview-item-title {
    margin-top: 10px;
    text-align: center;
}

.out-border {
    border: 1px solid #DCDFE6;
}

.statistics-layout {
    margin-top: 20px;
    border: 1px solid #DCDFE6;
}

.mine-layout {
    position: absolute;
    right: 140px;
    top: 107px;
    width: 250px;
    height: 235px;
}

.address-content {
    padding: 20px;
    font-size: 18px
}

.no-wrap {
    white-space: nowrap;
}

.modal {
    position: fixed !important;
    /* 其他样式 */
}

.modal-box {
    background-color: #fff !important;
    /* 其他样式 */
}

.modal-box {
    width: 60%;
    /* 调整宽度 */
    height: 50%;
    /* 调整高度 */
    position: relative;
    margin: auto;
    padding: 2rem;
    background-color: #fff;
    border-radius: 4px;
}
</style>